<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getLogListApi } from '@/api/log.js'
const searchParm = reactive({
  logType: '登录日志', // 默认值
  options: [
    { value: '登录日志', label: '登录日志' },
    { value: '操作日志', label: '操作日志' }
  ]
})
const logList = ref([])

const getList = async () => {
  let result = await getLogListApi(searchParm.logType)
  logList.value = result.data
}

onMounted(() => {
  getList()
})
</script>

<template>
  <el-main>
    <!-- 下拉框 -->
    <el-select
      v-model="searchParm.logType"
      placeholder="请选择日志类型"
      @change="getList"
      style="max-width: 10%"
    >
      <el-option
        v-for="item in searchParm.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <!-- 表格 -->
    <el-table
      default-expand-all
      :data="logList"
      row-key="id"
      style="width: 100%"
    >
      <el-table-column prop="content" label="日志模块" min-width="12%" />
      <el-table-column prop="title" label="日志操作" min-width="12%" />
      <el-table-column prop="operName" label="日志者" min-width="12%" />
      <el-table-column prop="username" label="日志模块" min-width="12%" />
      <el-table-column prop="ip" label="ip" min-width="12%" />
      <el-table-column prop="ipLocation" label="ip地址" min-width="12%" />
    </el-table>
  </el-main>
</template>

<style scoped></style>
